<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="/resource/css/assets/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/resource/css/assets/font-awesome.min.css"/>
    <link rel="stylesheet" href="/resource/css/assets/ace.min.css"/>
    <link rel="stylesheet" href="/resource/css/assets/ace-rtl.min.css"/>
    <link rel="stylesheet" href="/resource/css/assets/ace-skins.min.css"/>
    <link rel="stylesheet" href="/resource/css/style.css"/>
    <link rel="stylesheet" href="/resource/css/assets/ace-ie.min.css"/>
    <title th:text="${wbeParameter.name}">登陆</title>
    <link rel="shortcut icon" href="/resource/hospital.png">
</head>
<body class="login-layout Reg_log_style">
<div class="logintop">
    <span>欢迎使用<small th:text="${wbeParameter.name}"></small></span>
</div>
<div class="loginbody">
    <div class="login-container">
        <div class="center">
            <span style="font-weight: bolder;font-size:25px;color: white"></span>
        </div>
        <div class="space-6"></div>
        <div class="position-relative">
            <div id="login-box" class="login-box widget-box no-border visible">
                <div class="widget-body">
                    <div class="widget-main">
                        <h4 class="header blue lighter bigger">
                            <i class="icon-coffee green"></i>
                            系统登陆
                        </h4>
                        <div class="login_icon"><img src="/resource/images/login.png"/></div>
                        <div class="layui-form">
                            <fieldset>
                                <ul>
                                    <li class="frame_style form_error">
                                        <label class="user_icon"></label>
                                        <input type="text" name="userName" lay-verify="required|userName"
                                               class="layui-input"
                                               placeholder="用户名" autocomplete="off"/>
                                    </li>
                                    <li class="frame_style form_error">
                                        <label class="password_icon"></label>
                                        <input type="password" name="password" lay-verify="required|pass"
                                               placeholder="密码" autocomplete="off"/>
                                    </li>
                                    <li class="frame_style form_error"><label class="Codes_icon"></label>
                                        <input placeholder="验证码（不区分大小写)" class="verification-input" style="width: 150px"
                                               type="text"
                                               autocomplete="off"/>
                                        <canvas id="canvas" class="Codes_region"></canvas>
                                    </li>
                                </ul>
                                <div class="space"></div>
                                <div class="clearfix">
                                    <label class="inline">
                                        <!--<a class="lbl" href="/backstageReg">注册</a>-->
                                        <!--|-->
                                        <a class="lbl" href="/forgetPas">忘记密码</a>
                                    </label>
                                    <button type="button" class="width-35 pull-right btn btn-sm btn-primary"
                                            id="login_btn" lay-submit="" lay-filter="demo1">
                                        <i class="icon-key"></i>登陆
                                    </button>
                                </div>
                                <div class="space-4"></div>
                            </fieldset>
                        </div>
                        <div class="social-or-login center">
                            <span class="bigger-110">通知</span>
                        </div>

                        <div class="social-login center">
                            本网站系统不再对IE8以下浏览器支持，请见谅。
                        </div>
                    </div>
                    <div class="toolbar clearfix">
                    </div>
                </div><!-- /widget-body -->
            </div><!-- /login-box -->
        </div><!-- /position-relative -->
    </div>
</div>
<div class="loginbm">版权所有 2022 <a th:text="${wbeParameter.name}"></a></div>
<strong></strong>
<script src="/resource/js/assets/ace-extra.min.js"></script>
<script src="/resource/js/assets/html5shiv.js"></script>
<script src="/resource/js/assets/respond.min.js"></script>
<script src="/resource/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/resource/common/layui/layui.js"></script>
<script>
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
            , form = layui.form,
            $ = layui.$;

        //自定义验证规则
        form.verify({
            userName: function (value) {
                if (value.length < 5) {
                    return '账号至少得5个字符';
                }
            }
            , pass: [/^[\S]{5,12}$/, '密码必须5到12位，且不能出现空格']

        });
        //图形验证码
        var show_num = [];
        draw(show_num);
        $("#canvas").on('click', function () {
            draw(show_num);
        })
        //监听提交
        form.on('submit(demo1)', function (data) {
            var val = $(".verification-input").val().toLowerCase();
            var num = show_num.join("");
            if (val == '') {
                layer.msg('请输入验证码!', {icon: 5, time: 3000});
                return false;
            } else if (val != num) {
                layer.msg('验证码错误！请重新输入!', {icon: 5, time: 3000});
                $(".verification-input").val('');
                return false;
            }
            $.ajax({
                url: '/login.do',
                type: 'post',
                dataType: 'json',
                data: data.field,
                async: false,
                success: function (result) {
                    console.log(result)
                    if (result.status) {
                        location.href = "/diplomaProjectAdmin";
                    } else {
                        layer.msg(result.msg, {time: 3000});
                    }
                }

            });
        });

        //生成验证码的函数
        function draw(show_num) {
            var canvas_width = $('#canvas').width();
            var canvas_height = $('#canvas').height();
            var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
            var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
            var aCode = sCode.split(",");
            var aLength = aCode.length;//获取到数组的长度
            for (var i = 0; i < 4; i++) { //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
                var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                var deg = Math.random() - 0.5; //产生一个随机弧度
                var txt = aCode[j];//得到随机的一个内容
                show_num[i] = txt.toLowerCase();
                var x = 7 + i * 20;//文字在canvas上的x坐标
                var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                context.font = "bold 21px 微软雅黑";
                context.translate(x, y);
                context.rotate(deg);
                context.fillStyle = randomColor();
                context.fillText(txt, 0, 0);
                context.rotate(-deg);
                context.translate(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //验证码上显示线条
                context.strokeStyle = randomColor();
                context.beginPath();
                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.stroke();
            }
            for (var i = 0; i <= 30; i++) { //验证码上显示小点
                context.strokeStyle = randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
        }

        //得到随机的颜色值
        function randomColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            return "rgb(" + r + "," + g + "," + b + ")";
        }

    });

</script>
</body>
</html>
